<template>
  <Dialog :appDialog="appDialog" ref="DialogRef">
    <el-form ref="ruleFormRef" v-model="formData" class="form-box">
      <el-form-item label="隐藏手机号" prop="phone">
        <el-switch v-model="formData.hide_phone" :active-value="1" :inactive-value="2" />
        <el-tooltip class="box-item" placement="right-start">
          <template #content> 一旦开启后，将在PC端后台和手机端页<br />面，原本展示客户的手机号将被隐藏，如<br />客户详情页，但不影响数据导出。 </template>
          <el-icon class="icon"><warning /></el-icon>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="导出时手机号隐藏" prop="exportPhone">
        <el-switch v-model="formData.export_hide_phone" :active-value="1" :inactive-value="2" />
        <el-tooltip class="box-item" placement="right-start">
          <template #content> 开启后，平台所有导出列表的表格中的手<br />机号将被隐藏。如：152****8011</template>
          <el-icon class="icon"><warning /></el-icon>
        </el-tooltip>
      </el-form-item>
    </el-form>
  </Dialog>
</template>


<script setup lang="ts">
import Dialog from '@/components/Dialog.vue'
import { ElMessage } from 'element-plus'
import { attrAdvanced, advancedInfo } from '../api'
import { ref, watch } from 'vue'
const DialogRef = ref({})
const formData = ref({
  hide_phone: 0,
  export_hide_phone: 0,
  id: '',
  cust_attr_advance_id: ''
})

// 取消
const cancelHandel = () => {
  appDialog.value.visible = false
}

// 保存
const submitHandel = () => {
  if (formData.value.id) {
    formData.value.cust_attr_advance_id = formData.value.id || ''
  }
  attrAdvanced(formData.value).then((r: any) => {
    ElMessage.success('保存成功')
    appDialog.value.visible = false
  })
}

const appDialog: any = ref({
  visible: false,
  title: '高级设置',
  width: '564px',
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: '取消',
  submitText: '确定'
})

watch(
  () => appDialog.value.visible,
  (val: boolean) => {
    if (val) {
      advancedInfo({}).then((r: any) => {
        console.log(r, 555)
        formData.value = Object.assign(formData.value, r)
      })
    }
  }
)

defineExpose({
  appDialog
})
</script>

<style lang="scss" scoped>
.form-box {
  height: 218px;
  .icon {
    font-size: 24px;
    margin-left: 6px;
    vertical-align: middle;
  }
  .tip-desc {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 20px;
  }
}
</style>
